import { Component, Input, OnInit } from '@angular/core';
import { ChartData, RadarIndicator, RaderData } from '../chart-option';

@Component({
  selector: 'app-radar-chart',
  templateUrl: './radar-chart.component.html',
  styleUrls: ['./radar-chart.component.scss']
})
export class RadarChartComponent implements OnInit {
  @Input() title = ''; // 图标标题
  @Input() data: RaderData[] = []; // 显示数据
  @Input() indicator: RadarIndicator[] = []; // 数据上限
  @Input() redius = '50%'; // 用于改变雷达图大小

  options = {};
  theme: string;

  // 图中的数据
  radarData = [
    {
      value: [1, 17.4, 8.8, 12, 0.2, 10],
      name: 'Allocated Budget'
    }
  ];

  raderIdc = [
    {
    name: '和平',
    max: 40
    },
    {
      name: '激进',
      max: 87
    },
    {
      name: '团结',
      max: 44
    },
    {
      name: '暴力',
      max: 60
    },
    {
      name: '保守',
      max: 13
    },
    {
      name: '分裂',
      max: 56
    }
  ];

  constructor() {}

  ngOnInit(): void {
    this.options = {
      title: {
        text: this.title
      },
      tooltip: {},
      // legend: {},
      redius: this.redius,
      radar: {
        axisLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        splitArea: {
          show: false
        },
        indicator: this.indicator,
        nameGap: 5
      },
      series: [
        {
          type: 'radar',
          data: this.data, // 数据
          symbol: 'none',
          areaStyle: {
            opacity: 0.3
          }
        }
      ],
      // 默认颜色
      color: [
        '#334692',
        '#c23531',
        '#2f4554',
        '#61a0a8',
        '#d48265',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3'
      ]
    };
  }
}
